import React from 'react';
import {
  Card,
  CardContent,
  CardMedia,
  Typography,
  Box,
  Chip,
  Rating,
} from '@mui/material';

interface GameCardProps {
  game: {
    id: number;
    title: string;
    imageUrl: string;
    tags: string[];
    rating: number;
    price: string;
  };
}

const GameCard: React.FC<GameCardProps> = ({ game }) => {
  return (
    <Card
      sx={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        transition: 'transform 0.2s',
        '&:hover': {
          transform: 'translateY(-4px)',
        },
      }}
    >
      <CardMedia
        component="img"
        height="140"
        image={game.imageUrl}
        alt={game.title}
        sx={{
          objectFit: 'cover',
        }}
      />
      <CardContent sx={{ flexGrow: 1 }}>
        <Typography gutterBottom variant="h6" component="div" noWrap>
          {game.title}
        </Typography>
        <Box sx={{ mb: 1 }}>
          <Rating value={game.rating} precision={0.5} size="small" readOnly />
        </Box>
        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: 1 }}>
          {game.tags.map((tag, index) => (
            <Chip
              key={index}
              label={tag}
              size="small"
              sx={{ fontSize: '0.75rem' }}
            />
          ))}
        </Box>
        <Typography
          variant="h6"
          color="primary"
          sx={{ mt: 'auto' }}
        >
          {game.price}
        </Typography>
      </CardContent>
    </Card>
  );
};

export default GameCard;
